<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 引⼊ layui.css -->
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: url(https://tse1-mm.cn.bing.net/th/id/OIP-C.tBFIBGx5SDULZOi2NPaJQAHaE8?w=232&h=191&c=7&r=0&o=5&dpr=1.3&pid=1.7) no-repeat;
            /* background-color: #a1a1a1cf; */
            background-size: 100% 100vh;
        }

        h1 {
            text-align: center;
        }

        .fu {
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            width: 500px;
            height: 400px;
            margin: auto;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .demo-reg-container {
            width: 320px;
            margin: 21px auto 0;
        }

        .demo-reg-other .layui-icon {
            position: relative;
            display: inline-block;
            margin: 0 2px;
            top: 2px;
            font-size: 26px;
        }
    </style>
    </head>

    <body>
        <div class="fu">
            <h1>注册</h1>
            <form class="layui-form">
                <div class="demo-reg-container">
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <input type="text" name="username" lay-verify="required|username" placeholder="用户名/昵称"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="password" value="" lay-verify="required" placeholder="密码"
                                autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword"
                                placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
                        <span style="position: relative; top: 6px; left: -15px;cursor: pointer;">
                            <ins>用户协议</ins>
                        </span>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
                    </div>
                    <div class="layui-form-item demo-reg-other">
                        <span style="cursor: pointer;color: #3492ed;" onclick="Login()">登录已有帐号</span>
                    </div>
                </div>
            </form>
        </div>
        <!-- 提示框 -->
        <div class="Tips"></div>
        <!-- 引⼊ layui.js -->
        <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>
        <!-- CDN引⼊JQuery -->
        <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
        <script>
            // 注册认证
            layui.use(function () {
                var $ = layui.$;
                var form = layui.form;
                var layer = layui.layer;
                var util = layui.util;
                var User = JSON.parse(localStorage.getItem('User'))
                // 认证账户
                const getkey = (key) => {
                    const arr = localStorage.getItem(key)
                    return str = arr ? true : false
                }
                // 自定义验证规则
                form.verify({
                    username: function (value, elem) {
                        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                            return '用户名不能有特殊字符';
                        }
                        if (/(^_)|(__)|(_+$)/.test(value)) {
                            return '用户名首尾不能出现下划线';
                        }
                        if (/^\d+$/.test(value)) {
                            return '用户名不能全为数字';
                        }
                        if (getkey('User')) {
                            return '用户名已存在';
                        }
                    },
                    // 确认密码
                    confirmPassword: function (value, item) {
                        var passwordValue = $('#reg-password').val();
                        if (!/^[\S]{6,16}$/.test(value)) {
                            return '密码必须为 6 到 16 位的非空字符';
                        }
                        if (value !== passwordValue) {
                            return '两次密码输入不一致';
                        }
                    }
                });

                // 提交事件
                form.on('submit(demo-reg)', function (data) {
                    var field = data.field; // 获取表单字段值
                    // 是否勾选同意
                    if (!field.agreement) {
                        layer.msg('您必须勾选同意用户协议才能注册');
                        return false;
                    }
                    // 提交账户并跳转页面
                    let arr = {
                        name: $('input[name=username]').val(),
                        password: $('#reg-password').val(),
                        is: false,
                        falg: false,
                        img: '//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png',
                        sex: '',
                        age: '',
                        date: '',
                        ctiy: '',
                        introduce: '',
                    }
                    localStorage.setItem('User', JSON.stringify(arr))
                    location.assign('./商品管理登录页面.html')
                    return false; // 阻止默认 form 跳转
                });
            });
            // 登录
            function Login() {
                event.preventDefault()
                location.assign('./商品管理登录页面.html')
            }
        </script>
    </body>

</html>